<template>
	<view>

		<view class="shop-param-list" v-for="(item,index) in attrArr" :key="index">
			<view class="shop-param-title">
				{{item.attr}}
			</view>
			<view class="shop-param-box">
				<view class="shop-param-item " v-for="(child,childindex) in item.value" :key="childindex"
					@click="selectAttr" :data-attr="index" :data-child="childindex"
					:class="{activeBtn:childindex==attr[index]}">

					{{child}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前选择属性序列数组
				attr: [],

			};
		},
		mounted() {
			// 设置当前选择属性序列数组的长度
			this.attr = new Array(this.attrArr.length);
			if(this.selIndexArr.length > 0){
				this.attr = this.selIndexArr;
			}
		},
		props: {

			// 属性数组
			attrArr: {
				type: Array,
				default: []
			},
			// 选择序列属性
			selIndexArr: {
				type: Array,
				default: []
			}

		},


		methods: {
			// 属性选择事件
			selectAttr(e) {
				var attr = e.target.dataset.attr;
				var child = e.target.dataset.child
				this.attr.splice(attr, 1, child);

				this.$emit("click", this.attr);


			},
		}
	}
</script>

<style>
	.shop-param-list {
		margin: 0 30rpx;
		clear: both;
	}

	.shop-param-title {
		font-size: 28rpx;
		color: #999;
		height: 28px;
		margin-top: 16px;
	}

	.shop-param-item {
		height: 70rpx;
		padding: 0 24rpx;
		border: 1rpx solid #e5e5e5;
		float: left;
		font-size: 24rpx;
		margin-right: 30rpx;
		margin-bottom: 18rpx;
		line-height: 70rpx;
		color: #666;
	}

	.activeBtn {
		border: 1rpx solid #00C3F5;
		color: #00C3F5;
	}
</style>